<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view>
		<view class="uni-title uni-common-pl">输入区域高度自适应，不会出现滚动条</view>
		<view class="uni-textarea">
			<textarea @blur="bindTextAreaBlur" auto-height />
			</view>
			<view class="uni-title uni-common-pl">占位符字体是红色的textarea</view>
			<view class="uni-textarea">
				<textarea placeholder-style="color:#F76260" placeholder="占位符字体是红色的"/>
			</view>
		</view>
</template>
<script>
export default {
    data() {
        return {}
    },
    methods: {
        bindTextAreaBlur: function (e) {
            console.log(e.detail.value)
        }
    }
}
</script>


<script setup>


</script>

<style lang="scss" scoped>
/* ========== 基础变量 ========== */
page {
  --uni-primary: #2979ff;
  --uni-danger: #f76260;
  --uni-text: #333;
  --uni-text-light: #666;
  --uni-border: #e5e5e5;
  --uni-bg: #f8f8f8;
}

/* ========== 统一间距 ========== */
.uni-common-pl {
  padding-left: 30rpx;
}
.uni-title {
  font-size: 30rpx;
  color: var(--uni-text-light);
  margin: 30rpx 0 20rpx;
}

/* ========== 自适应高度 textarea 容器 ========== */
.uni-textarea {
  margin: 0 30rpx;
  background: #fff;
  border: 2rpx solid var(--uni-border);
  border-radius: 8rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.02);
}

/* ========== textarea 本身 ========== */
.uni-textarea textarea {
  width: 100%;
  font-size: 32rpx;
  line-height: 1.6;
  color: var(--uni-text);
  min-height: 80rpx;      /* 初始一行高度 */
  max-height: 400rpx;     /* 最大高度，超过出滚动条 */
  padding: 0;
  border: none;
  outline: none;
  resize: none;           /* 禁止手动拖拽 */
}
</style>
